<template>
    <div class="userList">
        <div class="header">
            <el-row>
                <el-col :span="18">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item separator-class="el-icon-arrow-right">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>材料列表</el-breadcrumb-item>
                    </el-breadcrumb>

                </el-col>
                <el-col :span="6">
                    <el-button type="success" size="mini" @click="exportDetail(0)">报销导出</el-button>
                    <el-button type="success" size="mini" @click="exportDetail(1)">流程汇总导出 </el-button>
                </el-col>
            </el-row>
        </div>
        <el-table
                height="69vh"
                :data="Materials"
                stripe
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                style="width: 100%">
            <el-table-column
                    prop="createTime"
                    label="时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="流程编码"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="amount"
                    label="报销金额"
                    >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="projectName"
                    width="180"
                    label="项目">
            </el-table-column>
            <el-table-column
                    prop="resultStatus"
                    label="审核状态">
            </el-table-column>
            <el-table-column
                    width="200"
                    label="操作">
                <template slot="header">
                    <el-input
                            @input="getSearch"
                            v-model="search"
                            size="mini"
                            prefix-icon="el-icon-search"
                            placeholder="请输入材料"/>
                </template>
                <template slot-scope="scope">
                    <el-button type="warning" size="mini" @click="upd(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-dialog :title="title" :visible.sync="dialogFormVisible" style="margin-top: 0;" >
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>项目：{{detail.projectName}}</span>
                </div>
                <div class="text item">
                        <el-table
                                :header-cell-style="{'text-align':'center'}"
                                :cell-style="{'text-align':'center'}"
                            :data="detail.materialVoList"
                            stripe
                            height="200"
                            style="width: 100%"
                        >
                        <el-table-column
                                prop="materialName"
                                label="材料"
                                >
                        </el-table-column>
                        <el-table-column
                                prop="materialAmout"
                                label="金额"
                               >
                        </el-table-column>
                        <el-table-column
                                width="200"
                                prop="materialCode"
                                label="编码">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="text item">
                    <div class="name">发票清单</div>
                    <div class="v" style="overflow-x: scroll;">
                        <el-image v-for="(item,index) in detailedList"
                                  :key="'a'+index"
                                  style="width: 100px; height: 100px;margin-right: 10px"
                                  :src="item"
                                  @click="preimage(item.url)"
                                  :preview-src-list="detailedList"
                                  fit="scale-down"></el-image>
                    </div>
                </div>
                <div class="text item">
                    <div class="name">材料清单</div>
                    <div class="v" style="overflow-x: scroll;">
                        <el-image v-for="(item,index) in payment"
                                  :key="'b'+index"
                                  style="width: 100px; height: 100px;margin-right: 10px"
                                  :src="item"
                                  @click="preimage(item)"
                                  :preview-src-list="payment"
                                  fit="scale-down"></el-image>
                    </div>
                </div>
                <div class="text item">
                    <div class="name">备注</div>
                    <div class="v">{{detail.memo}}</div>
                </div>
                <div class="text item">
                    <div class="name">状态</div>
                    <div class="v">{{detail.resultStatus}}</div>
                </div>
            </el-card>

            <el-steps :space="200" finish-status="" style="margin-top: 50px" align-center >
                <el-step :title="currentName" status="success" description="提交" ></el-step>
                <el-step :title="item.name" v-for="item in detail.auditingVoList"
                 :key="item.auditingCode"
                 :status="item.auditingResult=='同意'?'success':'error'"
                         @click.native="checkDetail(item)"
                 :description="item.auditingResult">
                </el-step>
                <el-step title="审批完成" status="success" v-if="detail.resultStatus=='已报销'||detail.resultStatus=='已拒绝'"></el-step>
                <el-step title="审批中" status="finish" v-else></el-step>
            </el-steps>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
        <el-pagination
                :page-size="10"
                :pager-count="11"
                @current-change="pageNum"
                layout="prev, pager, next"
                :total="totalSize">
        </el-pagination>
    </div>
</template>

<script>
    import { userReimbursedRecord,taskDetail} from "../../network/business";
    // import {addMaterial} from "../../network/business";
    // import {delMaterial} from "../../network/business";

    export default {
        name: "index",
        data(){
            return {
                visible:false,
                innerVisible:false,
                search:'',
                dialogFormVisible:false,
                disabled:false,
                title:"报销详情",
                currentName:'',
                rules: {
                    user:[
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    pass:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                    region:[
                        { required: true, message: '请选择活动区域', trigger: 'change' },
                    ]
                },

                addUserFrom:{
                    name:"",
                    pass:"",
                    region:""
                },
                steps:{

                },
                srcList:[],
                data:{
                  pageNum:1,
                    pageSize:10
                },
                totalSize:0,
                Materials:[],
                detail:"",code:0,detailedList:[], payment:[],
                hintImag:[],
                oneClick:true
            }
        },
        created() {
            this.getuserReimbursedRecord()
        },
        methods:{
            getSearch(){
                this.data.pageNum=1
                this.data.searchVal=this.search
                this.getuserReimbursedRecord()
            },

            pageNum(E){
                this.data.pageNum=E
              this.getuserReimbursedRecord()

            },
            preimage(url){

                this.srcList[0]=url
            },
            async getuserReimbursedRecord(){
                let status = await userReimbursedRecord(this.data)
                if(status.code==200){
                  this.Materials=status.data.content
                    this.totalSize=status.data.totalSize

                }else{
                    this.$error(status.msg)
                }
            },
            async getTaskDetail(){
                let data={
                    code:this.code
                }
                let status = await taskDetail(data)

                if(status.code==200){

                    this.detail=status.data
                    if(this.oneClick){
                        status.data.paymentList.forEach(item=>{
                            this.payment.push(item.url)
                        })

                        status.data.detailedList.forEach(item=>{
                            this.detailedList.push(item.url)
                        })
                        this.oneClick=false
                    }


                }else{
                    this.$error(status.msg)
                }
            },
            async upd(row){
                this.dialogFormVisible=true

                this.currentName=row.name
                this.code=row.code
                this.getTaskDetail()
            },
            del(){
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            exportDetail(classify=0){
                this.$confirm('是否导出数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    if(classify==0) window.location.href='https://www.xmssj.com/dl/api/reimbursed/export'
                    if(classify==1)  window.location.href='https://www.xmssj.com/dl/api/report/reimbursedList'

                        this.$message({
                            type: 'success',
                            message: '导出成功!'})

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消导出'
                    });
                });
            },
            cancel(){
                this.dialogFormVisible=false

            },
            confirm(){
                this.dialogFormVisible=false
            },

            checkDetail(item){
                this.hintImag=item.imgs
                let data= `
                <p style="padding: 10px 0;"><span style="color: #333;font-weight: bold">流程编码：</span>${item.auditingCode}</p>
                <p style="padding: 10px 0;"><span style="color: #333;font-weight: bold">姓名：</span>${item.name}</p>
                <p style="padding: 10px 0;"><span style="color: #333;font-weight: bold">时间：</span>${item.createTime}</p>
                <p style="padding: 10px 0;"><span style="color: #333;font-weight: bold">状态：</span>${item.auditingResult}</p>
                <p style="padding: 10px 0;margin-bottom: 20px;"><span style="color: #333;font-weight: bold">备注：</span>${item.memo}</p>
                `

                let img=''
                for(let i in this.hintImag){
                    img+="<img style='width: 100px;height: 100px;margin-right: 20px' src="+this.hintImag[i]+">"+"</img>"
                }
                this.$alert(data+img, '详情', {
                    dangerouslyUseHTMLString: true
                });
            }
        }
    }
</script>

<style scoped lang="sass">

    .header
        margin-bottom: 20px
        .el-select
            width: 100%
        ::v-deep .el-dialog
            margin-top: 0 !important
            width: 50%
            border-radius: 5px
    .item
        padding: 10px 0
        display: flex
        .name
            font-weight: bold
            padding-right: 20px
    ::v-deep .el-icon-circle-close
        color: #fff

</style>